<template>
  <el-form :model="form" label-width="120px">
  
        
                    <JmInput jmname="普通输入：" v-model="form.name"></JmInput>
                    <JmInput type="num" jmname="数字输入：" v-model="form.age"></JmInput>
                    <JmInput type="password" jmname="密码输入：" v-model="form.password"></JmInput>
                    <JmInput type="textarea" jmname="多行输入：" v-model="form.name"></JmInput>
                    <JmInput type="date" jmname="日期输入：" v-model="form.createTime"></JmInput>
                    <JmInput type="datetime" jmname="日期时间：" v-model="form.createTime2"></JmInput>
                    <JmInput type="time" jmname="时间输入：" v-model="form.createTime3"></JmInput>
                    <in-list type="text-list" jmname="文本列表：" v-model="form.urlList"></in-list>
                    <JmInput type="slider" jmname="滑块参数：" v-model="form.widthValue"></JmInput>
                    <JmInput type="color" jmname="颜色选择：" v-model="form.color"></JmInput>
                    <JmInput type="rate" jmname="评分组件：" v-model="form.rate"></JmInput> 
                    <JmInput type="img" jmname="图片" v-model="form.img"></JmInput> 
                    <JmInput type="imgs" jmname="多图片" v-model="form.imgList"></JmInput> 
                    <JmEnum jmname="枚举单选：" v-model="form.status" :jv="{1: '正常', 2: '禁用'}" jtype="1"  ></JmEnum>
                    <JmEnum jmname="单选文字：" v-model="form.status" :jv="{1: '正常', 2: '禁用'}" jtype="2"  ></JmEnum>
                    <JmEnum jmname="单选按钮：" v-model="form.status" :jv="{1: '正常', 2: '禁用'}" jtype="3"  ></JmEnum>
                    <JmEnum jmname="单选下拉框：" v-model="form.status" :jv="{1: '正常', 2: '禁用'}" jtype="4"  ></JmEnum>
                    <JmEnum jmname="多选下拉框" v-model="value1" :jv="options" jtype="5"  ></JmEnum>
                    <el-form-item label="多选">  
                              
                        <el-checkbox-group v-model="checkList">
                          <el-checkbox label="Option A" />
                          <el-checkbox label="Option B" />
                          <el-checkbox label="Option C" />
                          <el-checkbox label="disabled" disabled />
                          <el-checkbox label="selected and disabled" disabled />
                        </el-checkbox-group>
                    </el-form-item>

 
                    <el-form-item label="表格">  
                        <el-table :data="tableData" style="width: 100%">
                          <el-table-column prop="date" label="Date" width="180" >
                          <template #default="scope">
                                <el-input  type="text"  v-model="scope.row.date"  /></template>
                          </el-table-column>
                          <el-table-column prop="name" label="Name" width="180" >
                          
                          <template #default="scope">
                                <el-input  type="text"  v-model="scope.row.name"  /></template>
                  
                          </el-table-column> 
                        <el-table-column label="操作" width="220">
                        <template #default="scope">
                          <el-button @click="delDetailCol(scope.$index)" size="mini"
                            >删除</el-button
                          >
                        </template>
                      </el-table-column> 
                        
                        </el-table> 
                          <el-button @click="addDetailCol()" size="mini"
                            >添加</el-button
                          >
                    </el-form-item>
 <QuillEditor theme="snow" />
 <QuillEditor
  :toolbar="toolbarOptions"
   contentType="html"
      v-model:content="form.content"
 
    /> 
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">Create</el-button>
                      <el-button>Cancel</el-button>
                    </el-form-item>
 
  </el-form>
</template>
 
<script>
 
import { QuillEditor } from '@vueup/vue-quill'

import '@vueup/vue-quill/dist/vue-quill.snow.css';
import JmInput from "../../components/form/JmInput.vue";
import JmEnum from "../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum ,QuillEditor},
  data() {
    return {
       content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        },
        toolbarOptions:[
            ['bold', 'italic', 'underline', 'strike'],        //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'],//引用，代码块

            [{ 'header': 1 }, { 'header': 2 }],               // 标题，键值对的形式；1、2表示字体大小  
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
            [{ 'script': 'sub'}, { 'script': 'super' }],      // 上下标 superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
            [{ 'direction': 'rtl' }],                       // 文本方向

            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题

            [{ 'color': [] }, { 'background': [] }],        // 字体颜色，字体背景颜色
            [{ 'font': [] }], //字体
            [{ 'align': [] }],//对齐方式
            
            ['link', 'image','video'],
            ['clean']        //清除字体样式                                 // remove formatting button 
            
 
          ],
      form: {
         name: '',
          password: '',
          age: 18,
          createTime: '',
          createTime2: '',
          createTime3: '',
          widthValue: 20,
          color: '#409eff',
          rate: 3,
          moneyFen: 101,
          img: '',
          audio: '',
          video: '',
          file: '',
          imgList: [   ],
          audioList: '',
          videoList: '',
          fileList: '',
          imgVideoList: '',
          urlList: '',
          content: '',
          status: 1,
      },
      checkList:['Option B', 'Option A'],
      value1 :[1],
      options : {1: '正常', 2: '禁用', 3: 'Option1'} ,
      tableData:[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        
      ],
      cities :[
               
            ]
    };
  },

   
  methods: {
     //删除,带上当前行的id即可row.id
    delDetailCol(index) {
     this.tableData.splice(index, 1);
    }, 
    onSubmit(){
      console.log(this.form);
    },
    addDetailCol(){
      
     this.tableData.push({
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        })
        ;
    },
     onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      } 
  
  },
  computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    } 
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>